<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CodePen Embed - Dynamic Directive Arguments</title>
<meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="SFyFtw9eIJPMM68V3m0Li8xYX3bgHDk3M++oRCAnIXAuvflD8Le13H+17sPtps4mNeyWd1+dlIRM/q+2pdBfYg==">
<link rel="stylesheet" media="all" href="static/css/embed-00d7f1b1de25d2946cda76996d392050056e6151ca146529fd6fa071e1bfc615.css">
<style>
    .hide {
      display: none !important;
    }

    #result-box {
      background: #faf9ff;
      color: #494949;
    }
    .embed-footer,
    .embed-nav {
      background: #faf9ff;
      display: none;
    }
    .embed-nav .code-types a,
    .embed-nav .result-button-list a,
    .action-button {
      color: #494949;
      background-color: #ffffff;
    }
    .embed-nav .code-types a.active,
    .embed-nav .result-button-list a.active,
    .action-button.active {
      background: #e5e5e5;
      color: #000000;
      box-shadow: inset 0px 3px #dddddd;
    }
    .embed-nav .logo-wrap .edit-on-codepen {
      color: #ffffff;
    }

    .embed-nav svg {
      stroke: #ffffff !important;
    }
  </style>
<link rel="stylesheet" media="all" href="static/css/twilight-9eb71b6edb11814ec9302f458eb8606e9eb58d14ef36cdf785d88aca31de5447.css">
<meta name="monetization" content="$ilp.uphold.com/biyqg2MkQKbe">
</head>
<body id="the-body" style="--borderWidth: 0;" class="codepen-embed-body codepen-embed-hidden-nav  static">
<nav class="embed-nav group" id="embed-nav">
<ul class="code-types">
<li class="code-type">
<a id="html-link" href="#html-box" role="button" aria-pressed="false">
HTML
</a>
</li>
<li class="code-type">
<a id="css-link" href="#css-box" role="button" aria-pressed="false">
SCSS
</a>
</li>
<li class="code-type">
<a id="js-link" href="#js-box" role="button" aria-pressed="false">
Babel
</a>
</li>
</ul>
<ul class="result-button-list">
<li class="results results-type">
<a id="result-link" href="#result-box" class="active" aria-pressed="true" role="button">
Result
</a>
</li>
<li>
<a href="#resources-link" id="skip-results-iframe-link">Skip Results Iframe</a>
</li>
</ul>
<div class="logo-wrap" id="edit-area">
<a class="edit-on-codepen" target="_blank" rel="noopener" href="javascript:;" title="Edit on CodePen">
<div class="large-logo">
<span id="edit-on-text" class="open-on">EDIT ON</span>
<svg id="embed-codepen-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 138 26" fill="none" stroke="#000" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="CodePen">
<path d="M80 6h-9v14h9m34-14h-9v14h9m-3-7h-6m-28 0h-6m51 7V6l11 14V6M22 16.7L33 24l11-7.3V9.3L33 2 22 9.3v7.4zm22 0L33 9.3l-11 7.4m0-7.4l11 7.3 11-7.3M33 2v7.3m0 7.4V24m55-10h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14M15 8c-1.3-1.3-3-2-5-2-4 0-7 3-7 7s3 7 7 7c2 0 3.7-.8 5-2m49-5c0 4-3 7-7 7h-5V6h5c4 0 7 3 7 7z"></path>
</svg>
</div>
<div class="box-logo">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="20 0 26 26" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.3" role="img" aria-label="Edit on CodePen">
<path id="icon-codepen-box" d="M22 16.7L33 24l11-7.3V9.3L33 2 22 9.3v7.4zm22 0L33 9.3l-11 7.4m0-7.4l11 7.3 11-7.3M33 2v7.3m0 7.4V24"></path>
</svg>
</div>
</a>
</div>
</nav>
<div id="output" data-border-style="none" data-header="false">
<div id="html-box" class="code-wrap code-box box " role="region" aria-label="HTML">
<pre tabindex="0"><code data-lang="htmlmixed" id="actual-html-code">&lt;div id=&quot;dynamicexample&quot;&gt;
  &lt;h3&gt;Scroll down inside this section ↓&lt;/h3&gt;
  &lt;p v-pin:[position]=&quot;200&quot;&gt;I am pinned onto the page at 200px to the left.&lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>
<div id="css-box" class="code-wrap code-box box " role="region" aria-label="CSS">
<pre tabindex="0"><code data-lang="text/x-scss" id="actual-css-code">#dynamicexample {
  height: 700px;
  font-family: &quot;Source Sans Pro&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif;
  color: #304455;
}</code></pre>
<a href="#0" id="view-css-compiled-button" class="action-button bottom right view-compiled-button" data-type="css">
View Compiled
</a>
</div>
<div id="js-box" class="code-wrap code-box box " role="region" aria-label="JS">
<pre tabindex="0"><code data-lang="jsx" id="actual-js-code">Vue.directive(&#39;pin&#39;, {
  bind: function (el, binding, vnode) {
    el.style.position = &#39;fixed&#39;;
    var s = (binding.arg == &#39;left&#39; ? &#39;left&#39; : &#39;top&#39;);
    el.style[s] = binding.value + &#39;px&#39;;
  }
});

new Vue({
  el: &#39;#dynamicexample&#39;,
  data: function () {
    return {
      position: &#39;left&#39;
    }
  }
})</code></pre>
<a href="#0" id="view-js-compiled-button" class="action-button bottom right view-compiled-button" data-type="js">
View Compiled
</a>
</div>
<div id="result-box" class="code-box active zoom-1" role="region" aria-label="Result">
<iframe allow="accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write" allowfullscreen="true" allowpaymentrequest="true" allowtransparency="true" class="result-iframe  " frameborder="0" id="result-iframe" loading="lazy" name="CodePen Preview for Dynamic Directive Arguments" sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation" scrolling="yes" title="CodePen Preview for Dynamic Directive Arguments" data-src="https://cdpn.io/team/Vue/fullembedgrid/rgLLzb?animations=run&type=embed" src="rgLLzb.html">
  </iframe>
</div>
<div id="about-box">
<div class="about-container">
<div class="about-user">
<a href="javascript:;" target="_blank" rel="noopener"><img src="static/picture/default.png" loading="lazy" alt="" class="about-image"></a>
<div class="about-user-info">
<p>
This Pen is owned by <a href="javascript:;" target="_blank" rel="noopener">Vue</a> on <a href="javascript:;" target="_blank" rel="noopener">CodePen</a>.
</p>
<p>
<a href="javascript:;" target="_blank" rel="noopener" class="about-user-more">
See more by @Vue on CodePen
</a>
</p>
</div>
</div>
</div>
</div>
<div id="resources-box" class="resources-box">
<h3>External CSS</h3>
<p>
This Pen doesn't use any external CSS resources.
</p>
<h3>External JavaScript</h3>
<ol class="list-of-resources">
<li>
<a href="javascript:;" target="_blank">https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js</a>
</li>
</ol>
</div>
</div>
<footer class="embed-footer" id="embed-footer">
<button id="resources-link" class="resources-link action-button bottom left" href="#resources-box" aria-pressed="false" role="button">
Resources
</button>
<ul class="scaling-choices bottom right">
<li><button class="action-button" id="zoom-button-1">1×</button></li>
<li><button class="action-button" id="zoom-button-05">0.5×</button></li>
<li><button class="action-button" id="zoom-button-025">0.25×</button></li>
</ul>
<button id="rerun-button" class="action-button rerun-button bottom right">
Rerun
</button>
</footer>
<script nonce="rYVjonm8bBM=">
    __processedPen = {"html":"&lt;div id=&quot;dynamicexample&quot;&gt;\n  &lt;h3&gt;Scroll down inside this section ↓&lt;/h3&gt;\n  &lt;p v-pin:[position]=&quot;200&quot;&gt;I am pinned onto the page at 200px to the left.&lt;/p&gt;\n&lt;/div&gt;","css":"#dynamicexample {\n  height: 700px;\n  font-family: &quot;Source Sans Pro&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif;\n  color: #304455;\n}","js":"Vue.directive(&#39;pin&#39;, {\n  bind: function (el, binding, vnode) {\n    el.style.position = &#39;fixed&#39;;\n    var s = binding.arg == &#39;left&#39; ? &#39;left&#39; : &#39;top&#39;;\n    el.style[s] = binding.value + &#39;px&#39;;\n  } });\n\n\nnew Vue({\n  el: &#39;#dynamicexample&#39;,\n  data: function () {\n    return {\n      position: &#39;left&#39; };\n\n  } });"};
    __preprocessors = {
      "html": "none",
      "css": "scss",
      "js": "babel"
    };
    __preprocessorNames = {
      "html": "HTML",
      "css": "SCSS",
      "js": "Babel"
    };
    __editable = false;
    __embed_prefill = false;
  </script>
<script src="static/js/embed-e369dee9e85a1a53638c341339102b70938d2f103a2252bc1bf4c7ec1dc26212.js"></script>
</body>
</html>
